<div ng-init="vm.init();refresh(vm.callback);">
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">Timestamp 小助手</div>
      <div class="pull-right">
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-5">
      <div class="text-center">
        <div style="margin:0 auto;width:400px;max-width:100%">
          <div class="input-group input-group-lg">
            <span class="input-group-addon">时区</span>
            <ui-select ng-model="vm.timezone" theme="bootstrap" ng-change="vm.changeTimezone(vm.timezone)">
              <ui-select-match>{{$select.selected}}</ui-select-match>
              <ui-select-choices repeat="timezone in vm.timezones | filter: $select.search">
                <div ng-bind-html="timezone | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <h2>{{vm.date}}</h2>
        <div class="clock" style="margin:30px auto 50px">
          <div class="pointer hour">
            <div class="endpoint hour"></div>
          </div>
          <div class="pointer minute">
            <div class="endpoint minute"></div>
          </div>
          <div class="pointer second">
            <div class="endpoint second"></div>
          </div>
          <div class="time">{{vm.time}}</div>
        </div>
        <h3>
          <span id="copy" ng-mouseenter="vm.stop = true" ng-mouseleave="vm.stop = false" uib-tooltip="时间戳，点击复制！"
              style="display:inline-block;width:175px;text-align:left">{{vm.nowTimestamp}}</span>
        </h3>
      </div>
    </div>
    <div class="col-md-7">
      <form novalidate>
        <div class="row input-list">
          <div class="col-md-12 input-list-item">
            <div class="input-group input-group-lg">
              <input type="number" min="0" class="form-control" ng-model="vm.timestamp" placeholder="时间戳">
              <span class="input-group-addon">
                <select ng-model="vm.timestampUnit" ng-change="vm.changeTimestampUnit(vm.timestampUnit)">
                  <option value="ms">毫秒</option>
                  <option value="s">秒</option>
                </select>
              </span>
              <span class="input-group-btn">
                <button class="btn btn-success btn-lg" ng-click="vm.toDatetime()" title="转换为日期时间"
                    ng-disabled="!vm.timestamp">
                  <i class="fa fa-angle-double-down"></i>
                </button>
              </span>
            </div>
          </div>
          <div class="col-md-12 input-list-item">
            <div class="input-group input-group-lg">
              <input id="datetime-picker" class="form-control" placeholder="日期时间">
              <span class="input-group-addon">
                <select ng-model="vm.format" ng-change="vm.changeFormat(vm.format)">
                  <option value="">自定义</option>
                  <option value="YYYY-MM-DD[T]HH:mm:ss.SSS[Z]">UTC</option>
                  <option value="ddd, DD MMM YYYY HH:mm:ss [GMT]">GMT</option>
                </select>
              </span>
              <span class="input-group-btn">
                <button class="btn btn-success btn-lg" ng-click="vm.toTimestamp()" title="转换为时间戳"
                    ng-disabled="!vm.datetime">
                  <i class="fa fa-angle-double-up"></i>
                </button>
              </span>
            </div>
          </div>
        </div>
        <div class="row input-list">
          <div class="col-md-12 input-list-panel">
            <div class="input-group input-group-lg">
              <span class="input-group-addon">自定义格式</span>
              <input class="form-control input-lg" ng-model="vm.custFormat" ng-disabled="vm.format"
                  ng-change="vm.changeCustFormat(vm.custFormat)">
            </div>
          </div>
        </div>
        <div class="row input-list">
          <div class="col-md-12 input-list-panel">
            <div class="panel panel-default">
              <div class="panel-heading">格式化占位符（<a href="http://momentjs.cn/docs/#/displaying/format/"
                  target="_blank">更多详见官方文档</a>）</div>
              <table class="table table-bordered table-responsive">
                <thead>
                  <tr>
                    <th width="30%">#</th>
                    <th width="30%">占位符</th>
                    <th width="40%">输出内容</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th rowspan="2">年份</th>
                    <td>YY</td>
                    <td>70 71 ... 29 30</td>
                  </tr>
                  <tr>
                    <td>YYYY</td>
                    <td>1970 1971 ... 2029 2030</td>
                  </tr>
                  <tr>
                    <th rowspan="3">月份</th>
                    <td>M</td>
                    <td>1 2 ... 11 12</td>
                  </tr>
                  <tr>
                    <td>MM</td>
                    <td>01 02 ... 11 12</td>
                  </tr>
                  <tr>
                    <td>MMM</td>
                    <td>Jan Feb ... Nov Dec</td>
                  </tr>
                  <tr>
                    <th rowspan="2">日期</th>
                    <td>D</td>
                    <td>1 2 ... 30 31</td>
                  </tr>
                  <tr>
                    <td>DD</td>
                    <td>01 02 ... 30 31</td>
                  </tr>
                  <tr>
                    <th rowspan="3">星期</th>
                    <td>d</td>
                    <td>0 1 ... 5 6</td>
                  </tr>
                  <tr>
                    <td>dd</td>
                    <td>Su Mo ... Fr Sa</td>
                  </tr>
                  <tr>
                    <td>ddd</td>
                    <td>Sun Mon ... Fri Sat</td>
                  </tr>
                  <tr>
                    <th rowspan="2">上午/下午</th>
                    <td>A</td>
                    <td>AM PM</td>
                  </tr>
                  <tr>
                    <td>a</td>
                    <td>am pm</td>
                  </tr>
                  <tr>
                    <th rowspan="4">时</th>
                    <td>H</td>
                    <td>0 1 ... 22 23</td>
                  </tr>
                  <tr>
                    <td>HH</td>
                    <td>00 01 ... 22 23</td>
                  </tr>
                  <tr>
                    <td>h</td>
                    <td>1 2 ... 11 12</td>
                  </tr>
                  <tr>
                    <td>hh</td>
                    <td>01 02 ... 11 12</td>
                  </tr>
                  <tr>
                    <th rowspan="2">分</th>
                    <td>m</td>
                    <td>0 1 ... 58 59</td>
                  </tr>
                  <tr>
                    <td>mm</td>
                    <td>00 01 ... 58 59</td>
                  </tr>
                  <tr>
                    <th rowspan="2">秒</th>
                    <td>s</td>
                    <td>0 1 ... 58 59</td>
                  </tr>
                  <tr>
                    <td>ss</td>
                    <td>00 01 ... 58 59</td>
                  </tr>
                  <tr>
                    <th rowspan="3">毫秒</th>
                    <td>S</td>
                    <td>0 1 ... 8 9</td>
                  </tr>
                  <tr>
                    <td>SS</td>
                    <td>00 01 ... 98 99</td>
                  </tr>
                  <tr>
                    <td>SSS</td>
                    <td>000 001 ... 998 999</td>
                  </tr>
                  <tr>
                    <th rowspan="2" style="border-bottom:none">时区</th>
                    <td>Z</td>
                    <td>-07:00 -06:00 ... +06:00 +07:00</td>
                  </tr>
                  <tr>
                    <td>ZZ</td>
                    <td>-0700 -0600 ... +0600 +0700</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
